<template>
  <div
    ref="echart"
    class="echart"
  ></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'BytEcharts',
  data() {
    return {
      chart: null
    }
  },
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    options() {
      this.renderChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart()
    })
  },
  beforeDestroy() {
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    renderChart() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.echart)
      }
      if (this.options) {
        this.chart.setOption(this.options)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 100%;
}
</style>
